<template>
  <view class="feedback p-lr-30">
    <view class="bg-w p-30 br-10">
      <h4>请选择问题类型</h4>
      <view class="m-tb-30 fc flex">
        <view class="p-10 bg-q-gray col-5 tc m-tb-15 tc-999 br-10 ts-26 p-tb-20 m-r-10" v-for="(item,index) in feedback_type"
              @tap="select_feedback(item)" :class="feedback_selected==item?'active':''">{{item}}</view>
      </view>
    </view>
    <view class="bg-w p-30 br-10 m-tb-30">
      <h4 class="m-b-25">请描述具体原因</h4>
      <textarea maxlength="300" placeholder="为了让您的问题能够尽快得到解决，请尽量详细描述您遇到的问题？" :value="question" @input="question_input" class="ts-26 tc-999"></textarea>
    </view>
    <view class="submit" @tap="submit_feedback" :style="question!=='' && feedback_selected!==''?'background-color: #818ffe':''">提交</view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  components: {},
  data() {
    return {
      feedback_type : [],
      feedback_selected : '',
      question : '',
    };
  },
  async onLoad(){
    this.feedback_type = this.common.customConfig.feedback;
  },
  computed: {
    ...mapState(['common','user'])
  },
  methods: {
    select_feedback(item){
      this.feedback_selected = item;
    },
    question_input(e){
      this.question = e.detail.value;
    },
    //提交反馈
    submit_feedback(){
      var that = this;
      if(this.feedback_selected==='') return;
      if(this.question==='') return;
      this.$api.postBase({
        url : 'feedback/submit',
        data : {
          feedback : this.feedback_selected,
          question : this.question
        },
        success: res=>{
          that.feedback_selected = '';
          that.question = '';
          that.$xyfun.msg('提交成功，我们会注意您的留言。')
        }
      })
    }

  },
};
</script>

<style>
page {
  background: #f5f5f5;
  padding: 20rpx 0;
}
</style>
<style scoped lang="scss">
.bg-q-gray{background-color: #f6f6f6;}
.active{
  background: #FF9800;
  color: #fff;
}
.feedback {
  .submit{
    background: #b4b4b4;
    padding: 0 50rpx;
    height: 80rpx;
    font-size: 30rpx;
    color: #fff;
    box-sizing: border-box;
    border-radius: 40rpx;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    width: 80%;
    margin: 0 10%;
    bottom: 30rpx;
    left: 0;
  }
}
</style>
